<template>
  <div class="leftMiddle">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <!-- <img src="../assets/leftMid2.png" alt="" /> -->
    <div class="box">
      <!-- <div class="tempo">
        <template v-for="(item, i) in progressList">
          <div :key="i">
            <div class="title">
              <div class="img">{{ i + 1 }}</div>
              <div class="text">{{ item.name }}</div>
            </div>
            <div class="tempoBottom">
              <img
                class="tempoBottomImg"
                src="../assets/tempoBottom.png"
                alt=""
              />
              <div class="num">{{ item.resultCount }}</div>
            </div>
          </div>
          <div
            class="left-0"
            :key="i + '111'"
            v-if="i + 1 != progressList.length"
          >
            <img src="../assets/leftIcon.gif" alt="" />
          </div>
        </template>
      </div> -->
      <!-- <img src="../assets/rightBottom2.png" alt="" /> -->
      <div class="warn">
        <div>
          <img src="../assets/warn0.png" alt="" />
          <span>正常（个）</span>
          <div>{{ appealList.normal }}</div>
        </div>
        <div>
          <img src="../assets/warn1.png" alt="" />
          <span>二级预警 (个)</span>
          <div>{{ appealList.warn }}</div>
        </div>
      </div>
      <div class="warn">
        <div>
          <img src="../assets/warn2.png" alt="" />
          <span>一级预警 (个)</span>
          <div>{{ appealList.transact }}</div>
        </div>
        <div>
          <img src="../assets/warn3.png" alt="" />
          <span>已超期 (个)</span>
          <div>{{ appealList.end }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { appealProgressTracking, appealWarningCount } from "@/api/serve";
import { cloneDeep } from "lodash";
export default {
  name: "LeftMiddle",
  props: {},
  components: {},
  data() {
    return {
      progressList: [
        {
          name: "研判中",
          resultCount: 0,
        },
        {
          name: "待受理",
          resultCount: 0,
        },
        {
          name: "处置中",
          resultCount: 0,
        },
        {
          name: "已完结",
          resultCount: 0,
        },
      ],
      appealList: {
        normal: 0,
        warn: 0,
        transact: 0,
        end: 0,
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      // appealProgressTracking().then((res) => {
      //   const d = res.data.result;
      //   if (d && d.length) {
      //     this.progressList.forEach((item) => {
      //       d.forEach((item2) => {
      //         if (item.name == item2.name) {
      //           item.resultCount = item2.resultCount;
      //         }
      //       });
      //     });
      //     this.progressList = cloneDeep(this.progressList);
      //   }
      // });
      // appealWarningCount().then((res) => {
      //   const d = res.data.result;
      //   if (d && d.length) {
      //     this.appealList = {
      //       warn: d[0].resultCount,
      //       transact: d[1].resultCount,
      //     };
      //   }
      // });
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.init();
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.tempoBottomImg {
  animation: blink 3s infinite;
}
.leftMiddle {
  padding-top: 24px 20px 23px 20px;
  .box {
    height: 236px;
    .tempo {
      display: flex;
      padding: 16px 20px 0;
      justify-content: space-between;
      .title {
        display: flex;
        .img {
          height: 36px;
          width: 36px;
          background-image: url("../assets/tempoIcon.png");
          text-align: center;
          line-height: 36px;
          font-size: 22px;
          color: #ffffff;
        }
        .text {
          width: 93px;
          height: 34px;
          background-image: url("../assets/tempoText.png");
          margin-left: -11px;
          font-size: 20px;
          color: #ffffff;
          line-height: 34px;
        }
      }
      .tempoBottom {
        position: relative;
        .num {
          left: 0;
          right: 0;
          top: 9px;
          width: 52px;
          font-weight: bold;
          font-size: 28px;
          color: #ffffff;
          line-height: 37px;
          position: absolute;
          text-align: center;
          width: 100%;
        }
      }
      .left-0 {
        display: flex;
        align-items: center;
        img {
          width: 40px;
        }
      }
    }
    .warn {
      margin: 23px 20px;
      height: 98px;
      display: flex;
      & > div {
        height: 100%;
        margin-right: 12px;
        background-image: url("../assets/leftWarn.png");
        background-size: 100% 100%;
        flex: 1;
        display: flex;
        color: #ffffff;
        align-items: center;
        justify-content: center;
        img {
          width: 60px;
          height: 43px;
        }
        span {
          font-size: 20px;
          margin-left: 12px;
          margin-right: 38px;
        }
        div {
          font-weight: bold;
          font-size: 28px;
        }
      }
      & > div:last-child {
        margin-left: 12px;
        margin-right: 0;
      }
    }
  }
}
</style>
